<template>
	<div class="container">
	<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="小程序用户管理" name="first">
		<div class="handle-box">
        <el-select
          v-model="query.matchType"
          placeholder="类型"
          class="handle-select mr10"
        >
        <el-option key="1" label="全部" value=""></el-option>
          <el-option key="2" label="TPP模式" value="TPP"></el-option>
          <el-option key="3" label="FPP模式" value="FPP"></el-option>
        </el-select>
        <el-input
          v-model="query.search"
          placeholder="比赛名称"
          class="handle-input mr10"
        ></el-input>
        <el-button type="primary" :icon="Search" @click="handleSearch"
          >搜索</el-button
        >
        <el-button type="primary" :icon="Plus" @click="ClickAdd"
          >新增</el-button
        >
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column
          type="index"
          :index="table_index"
          label="序号"
          width="55"
          align="center"
        ></el-table-column>
       
        <el-table-column prop="wx_openid" align="center" label="游戏唯一ID" width="130">
          
        </el-table-column>
        <el-table-column
          prop="player_name"
          align="center"
          label="游戏ID"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="team_name"
          align="center"
          label="所属队伍"
        ></el-table-column>
        
        
        <el-table-column prop="startTime" width="180" label="加入时间"></el-table-column>
        <el-table-column prop="teamRole" width="180" label="战队权限"></el-table-column>
        <el-table-column prop="dataShow" width="180" label="展示权限"></el-table-column>
       
        <el-table-column label="操作" width="160" align="center">
          <template #default="scope">
            <el-button
              text
              :icon="Edit"
              width="40"
              @click="handleEdit(scope.$index, scope.row)"
              v-permiss="20"
            >
            </el-button>
            <el-button
              text
              :icon="Delete"
              class="red"
              @click="handleDelete(scope.row.matchCode)"
              v-permiss="16"
            >
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total,sizes, prev, pager, next"
          v-model:page-size="query.limit"
          :page-sizes="[10, 15, 20, 50]"
          :current-page="query.page"
          :total="pageTotal"
          :hide-on-single-page="false"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
        ></el-pagination>
      </div>
	</el-tab-pane>
    <el-tab-pane label="轮播图管理" name="second">User</el-tab-pane>
    <el-tab-pane label="首页视频管理" name="third">Config</el-tab-pane>
    <el-tab-pane label="报审表单管理" name="fourth">Role</el-tab-pane>

  </el-tabs>
	</div>
</template>

<script setup lang="ts" name="basecharts">
import { ref, reactive, unref } from "vue";
import { Delete, Edit, Search, Plus } from "@element-plus/icons-vue";
import type { TabsPaneContext } from 'element-plus'
const activeName = ref('first')
const query = reactive({
  matchType: "",
  matchState: "",
  search: "",
  sortBy:"createTime",
  total: 15,
  page: 1,
  limit: 10,
});
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
</script>

<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
